<template>
  <div class="container">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" size="mini" class="ruleForm">
      <el-form-item label="已就业人数" style="font-weight: bold;">
        <!-- <el-input v-model="ruleForm.idCard"></el-input> -->
      </el-form-item>

      <el-form-item label="单位就业" prop="rejrs3">
        <el-input v-model.number="ruleForm.rejrs3" :maxlength="6" @input="clickje"></el-input>
      </el-form-item>
      <el-form-item label="灵活就业" prop="rejrs4">
        <el-input v-model.number="ruleForm.rejrs4" :maxlength="6" @input="clickje"></el-input>
      </el-form-item>
      <!-- <el-form-item label="已就业人数小计" prop="rejrs2">
        <el-input v-model.number="ruleForm.rejrs2" readonly="readonly"></el-input>
      </el-form-item> -->
      <el-form-item label="未就业人数" style="font-weight: bold;">

      </el-form-item>
      <el-form-item label="有就业意愿人数" prop="rejrs6">
        <el-input v-model.number="ruleForm.rejrs6" :maxlength="6" @input="clickyyy"></el-input>
      </el-form-item>
      <el-form-item label="无就业意愿人数" style="font-weight: bold;">

      </el-form-item>
      <el-form-item label="照顾家人" prop="rejrs8">
        <el-input v-model.number="ruleForm.rejrs8" :maxlength="6" @input="clickwyu"></el-input>
      </el-form-item>
      <el-form-item label="身体原因" prop="rejrs9">
        <el-input v-model.number="ruleForm.rejrs9" :maxlength="6" @input="clickwyu"></el-input>
      </el-form-item>
      <el-form-item label="升学，备考" prop="rejrs10">
        <el-input v-model.number="ruleForm.rejrs10" :maxlength="6" @input="clickwyu"></el-input>
      </el-form-item>
      <el-form-item label="主观意愿不强" prop="rejrs11">
        <el-input v-model.number="ruleForm.rejrs11" :maxlength="6" @input="clickwyu"></el-input>
      </el-form-item>
      <el-form-item label="其他" prop="rejrs12">
        <el-input v-model.number="ruleForm.rejrs12" :maxlength="6" @input="clickwyu"></el-input>
      </el-form-item>
      <!-- <el-form-item label="无就业意愿人数小计" prop="rejrs7">
        <el-input v-model.number="ruleForm.rejrs7" readonly="readonly"></el-input>
      </el-form-item>
      <el-form-item label="未就业人数总计" prop="rejrs5">
        <el-input v-model.number="ruleForm.rejrs5" readonly="readonly"></el-input>
      </el-form-item>
      <el-form-item label="辖区内劳动力总人数" prop="rejrs1">
        <el-input v-model.number="ruleForm.rejrs1" readonly="readonly"></el-input>
      </el-form-item> -->

      <el-form-item>
        <el-button type="primary" :loading="isloading" @click="submitForm('ruleForm')">确定</el-button>
        <el-button @click="resetForm('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { employmentInsert, employmentGetid, employmentUpdate } from '../../../api/personal';
export default {
  name: 'addJobFair',
  components: {

  },
  data () {
    return {
      dialogMap: false,
      // 禁止多次提交
      isloading: false,
      // 市场下拉框
      optionsData: '',
      separatorTime: '',
      holdstartDate: '',
      holdstartDateTwo: '',
      optionList: "",
      options: {
        trade: []
      },
      workArea: [],
      majorlist: [],
      ruleForm: {
        rejrs1: '',//辖区内劳动力总人数
        rejrs2: '',//已就业人数小计
        rejrs3: '',//单位就业
        rejrs4: '',//灵活就业
        rejrs5: '',//未就业人数小计
        rejrs6: '',//有就业意愿人数
        rejrs7: '',//未就业人数小计
        rejrs8: '',//照顾家人
        rejrs9: '',//身体原因
        rejrs10: '',//升学备考
        rejrs11: '',//主观意愿不强
        rejrs12: '',//其他
        id: ""
      },
      rules: {


        rejrs3: [
          { required: true, message: '请填写单位就业人数', trigger: 'blur' },
          { type: 'number', message: '必须为数字值' }
        ],
        rejrs4: [
          { required: true, message: '请填写灵活就业人数', trigger: 'blur' },
          { type: 'number', message: '必须为数字值' }
        ],
        rejrs6: [
          { required: true, message: '请填有就业意愿人数', trigger: 'blur' },
          { type: 'number', message: '必须为数字值' }
        ],
        rejrs8: [
          { required: true, message: '请填写照顾家人', trigger: 'blur' },
          { type: 'number', message: '必须为数字值' }
        ],
        rejrs9: [
          { required: true, message: '请填写身体原因', trigger: 'blur' },
          { type: 'number', message: '必须为数字值' }
        ],
        rejrs10: [
          { required: true, message: '请填写升学备考', trigger: 'blur' },
          { type: 'number', message: '必须为数字值' }
        ],
        rejrs11: [
          { required: true, message: '请填写升学备考', trigger: 'blur' },
          { type: 'number', message: '必须为数字值' }
        ],
        rejrs12: [
          { required: true, message: '请填写其他', trigger: 'blur' },
          { type: 'number', message: '必须为数字值' }
        ],

      }
    };
  },
  methods: {

    //已就业人数小计
    clickje () {
      this.ruleForm.rejrs2 = Number(this.ruleForm.rejrs3) + Number(this.ruleForm.rejrs4)
      this.ruleForm.rejrs1 = Number(this.ruleForm.rejrs2) + Number(this.ruleForm.rejrs5)
    },
    clickyyy () {

      this.ruleForm.rejrs5 = Number(this.ruleForm.rejrs6) + Number(this.ruleForm.rejrs7)
      this.ruleForm.rejrs1 = Number(this.ruleForm.rejrs2) + Number(this.ruleForm.rejrs5)
    },
    clickwyu () {
      this.ruleForm.rejrs7 = Number(this.ruleForm.rejrs8) + Number(this.ruleForm.rejrs9) + Number(this.ruleForm.rejrs10) + Number(this.ruleForm.rejrs11) + Number(this.ruleForm.rejrs12)
      this.ruleForm.rejrs5 = Number(this.ruleForm.rejrs6) + Number(this.ruleForm.rejrs7)
      this.ruleForm.rejrs1 = Number(this.ruleForm.rejrs2) + Number(this.ruleForm.rejrs5)
    },



    // 添加成功
    submitForm (formName) {
      let that = this
      that.isloading = true
      const loading = that.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.2)'
      });

      that.$refs[formName].validate((valid) => {
        if (valid) {


          let parms = { ...this.ruleForm }

          if (this.ruleForm.id === '') {

            let now = new Date();
            let year = now.getFullYear(); //得到年份
            let month = now.getMonth();//得到月份
            let date = now.getDate();//得到日期
            let hour = now.getHours();//得到小时
            let minu = now.getMinutes();//得到分钟
            let sec = now.getSeconds();//得到秒
            month = month + 1;
            if (month < 10) month = "0" + month;
            if (date < 10) date = "0" + date;
            if (hour < 10) hour = "0" + hour;
            if (minu < 10) minu = "0" + minu;
            if (sec < 10) sec = "0" + sec;
            let timedata = year + "-" + month + "-" + date + " " + hour + ":" + minu + ":" + sec
            parms.createTime = timedata
            employmentInsert(parms).then(data => {
              loading.close();
              that.isloading = false
              if (data.success) {
                this.$router.push({
                  path: '/employmentRegistrationList'
                })
              } else {
                this.$message.error(`${data.msg}`);
              }
            });
          } else {
            employmentUpdate(parms).then(data => {
              loading.close();
              that.isloading = false
              if (data.success) {
                this.$router.push({
                  path: '/employmentRegistrationList'
                })
              } else {
                this.$message.error(`${data.msg}`);
              }
            });
          }




        } else {
          console.log('error submit!!');
          loading.close();
          that.isloading = false
          return false;
        }
      });
    },
    init () {

    },



    // 取消
    resetForm (formName) {
      this.$router.go(-1)
    },


    getDetail () {
      employmentGetid(this.$route.query.id).then(data => {
        if (data.success) {
          this.ruleForm = data.data || {};
        } else {
          this.$message.error(`${data.msg}`);
        }
      });
    },

  },
  mounted () {
    //  初始化加载数据
    this.$refs['ruleForm'].resetFields();
    this.init()
    if (this.$route.query.id) {
      this.getDetail()
    }

  },
  created () {

  },
  watch: {
    '$route': function (val, oldVal) {
      console.log(val, 'val')
      this.$nextTick(() => {
        this.$refs['ruleForm'].resetFields();
      })
    },
    '$route.query.id': function (val, oldVal) {
      console.log(val, 'val')
      this.$nextTick(() => {
        this.$refs['ruleForm'].resetFields();
        this.getDetail();
      })
    }
  },
}
</script>

<style scoped>
.ruleForm {
    width: 30%;
}
.grid-content-map {
    width: 435px;
    height: 200px;
    background: indianred;
}
/* .address {
    margin-bottom: 40px;
} */
.dialog {
    height: 600px;
}
.dialog /deep/ .el-dialog__header {
    font-size: 14px;
    padding: 10px 0 5px 10px;
}
.dialog /deep/ .el-dialog__body {
    width: 100%;
    padding: 0;
    height: 100%;
}
.address /deep/ .el-button {
    position: absolute;
    top: 40px;
    left: 0;
}
</style>